<!-- 已发货 -->
<template>
  <div class="page-box h100 display-flex czbj">
    <p class="title-label mb10">已发货</p>
    <dxtable
      :dataJson="dataJson"
      :portUrl="portUrl"
      :formJson="formJson"
      :qx="qx"
      :czFun="czFun"
      ref="databale"
           :fixed="true"
    ></dxtable>

    <n-modal v-model:show="showModal" preset="card" class="dfdsrtyrytyt">
      <template #header>
        <div>查看物流地址</div>
      </template>
      <div class="z9 fz12 cen pt40 pm40" v-if="Reason">
        {{ Reason }}
      </div>
      <div v-if="jdasfsd" class="sdfsdfyttytruy">
        <n-timeline>
            
          <n-timeline-item
          v-for="sd in Traces"
            type="success"
            :title="sd.Location"
            :content="sd.AcceptStation"
            :time="sd.AcceptTime"
          />
          <!-- <n-timeline-item content="啊" /> -->
        </n-timeline>
      </div>
      <div class="vertical-center " v-else>
      <div>
        <div class="spinner">
          <div class="half-circle-spinner">
            <div class="circle circle-1"></div>
            <div class="circle circle-2"></div>
          </div>
        </div>
        <div class="fz12 z9 cen">加载中...</div>
      </div>
    </div>
      <template #action>
        <div class="tr">
          <n-button class="ml20" @click="showModal = false"> 关闭 </n-button>
        </div>
      </template>
    </n-modal>
  </div>
</template>
<script lang="ts" setup>
import { Options } from "@vicons/ionicons5";
import dxtable from "../../../components/util/dxtable.vue";
import sort from "../../../components/util/sort.vue";
import { dxget, dxpost, dialog } from "../../../util/index";
import { NButton, NImage, NTag } from "naive-ui";
import { h, ref, reactive, render } from "vue";
const databale = ref();
const showModal = ref(false);
const rowData = ref({});
const shhehsdrt = ref();
const hjshsd = ref();
const kjxzdd = ref([]);
const ShipperCode = ref();
const LogisticCode = ref();
const Traces =ref([])
const jdasfsd =ref(false)
const Reason =ref()
const initeer = () => {
  databale.value.initDataExpose();
};
let zhidfds = [
      {
        label:"微信",
        value:"1"
      },{
        label:"支付宝",
        value:"2"
      },{
        label:"平台币",
        value:"3"
      }
    ]
const shjjseft = ref("1");
let dataJson = [
  {
    title: "订单编号",
    key: "ddON",
    width: "180",
  },
  {
    title: "快递公司",
    width:120,
    key: "ktgs",
    options: [],
    render(row) {
      try{
            return kjxzdd.value.filter((a) => a.value == row.ktgs)[0].label;
        }catch(e){
            return '--'
        }
    },
  },
  {
    title: "快递编码",
    key: "ktbh",
    width:140
  },
  {
      title: "商品名称",
      key: "c.title",
      "search": true,
      width:200,
      render(row){
        return row.jstitle
      }
    },
  {
    title: "单价",
    key: "jsdanjia",
    width:80
  },
  {
    title: "数量",
    key: "number",
    width:80
  },{
      title: "支付金额",
      key: "jiner",
      width:80
    },
  {
    title: "支付方式",
    key: "zhifuqd",
    type: "select",
    options: [
      {
        label: "全部",
        value: "",
      },
      ...zhidfds,
    ],
    search: true,
    width: 80,
    render(row) {
      let ksdfsd = "--"
      if(row.zhifuqd==1){
        ksdfsd="微信"
      }
      if(row.zhifuqd==2){
         ksdfsd="支付宝"
      }
      if(row.zhifuqd==3){
        ksdfsd="平台币"
      }
      return ksdfsd
    }
  },
  {
    title: "购买人姓名",
    width: 80,
    key: "b.name",
    search: true,
    render(row) {
      return row.uname;
    },
  },
  {
    title: "电话",
    key: "uphone",
    width:120
  },

  {
    title: "下单时间",
    key: "addTime",
    width: 150,
  },
  {
    title: "发货时间",
    key: "fhsj",
    width: 150,
  },


  
];

const qx = {
  DeletePermissionID: "23456", //删除
  EditPermissionIdentifier: "23456", // 编辑
  NewPermissionIdentifier: "234567", // 新建
  ViewPermissionID: "234567", // 查看
};
const portUrl = "jyc/dingdanzhuangtai/dingdanzhuangtai?type=2&state=3";

let formJson = reactive([]);
// 获取字典内容
const xtgxxmfl = async () => {
  const { data }: any = await dxget("dxgjAdmin/getzd", { name: "jyckdgsbm" });
  kjxzdd.value = data;
};
xtgxxmfl();
const shenhedtyt = async () => {
 
};
const czFun = {
  fun: (row) => {
    return [
      h(
        NButton,
        {
          type: "info",
          quaternary: true,
          onClick: async (e) => {
            let statics: any = await dialog("确认取消发货吗, 是否继续?");
            if (statics == 1) {
              const data = await dxpost(
                "jyc/dingdanzhuangtai/dingdanzhuangtai",
                {
                  id: row.id,
                  state: 2,
                },
                "put"
              );
              initeer();
            }
          },
        },
        "取消发货"
      ),
      h(
        NButton,
        {
          type: "info",
          quaternary: true,
          onClick: async (e) => {
            showModal.value = true;
            jdasfsd.value = false
            const { data } = await dxget("jyc/kuaidi/index", {
              LogisticCode: row.ktbh,
              ShipperCode: row.ktgs,
            });
            Reason.value= data.Reason
            jdasfsd.value = true
            Traces.value = data.Traces
            console.log(data.Traces);
          },
        },
        "查看物流"
      ),
    ];
  },
};
</script>
<style scoped>
    .sdfsdfyttytruy{
        max-height: 600px;
        overflow: auto;
    }

</style>
